
<#macro checkViews_1>

	 <div class="col-sm-2" style="background-color: #fff;">
	        <div class="ibox-title" style="border-color:#fff">
	            <h5>服务器CPU使用情况</h5>
	        </div>
	    <div class="col-sm-12" id="check_img_1" style="height: 200px;padding-left: 50px;padding-top: 30px;">
	       <h7> cpu:</h7>
        <table width="150" style="border: 1px solid #00FF00;">
            <tr>
                <td>
                    <table width="150" bgcolor="#FFFFFF" cellpadding="0"
                        cellspacing="0">
                        <tr>
                            <td width="${monitorInfo.cpuRatio}" bgcolor="#00FF00"
                                align="center">
                                ${monitorInfo.cpuRatio}
                            </td>
                            <td bgcolor="#FFFFFF">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <table width="1000" style="height: 0.5px;margin-top: 20px;">
            <tr>
                <td></td>
            </tr>
        </table>
        <h7>内存:${memory/11}<h7>
        <table width="150" style="border: 1px solid #00FF00;">
            <tr>
                <td>
                    <table width="150" bgcolor="#FFFFFF" cellpadding="0"
                        cellspacing="0">
                        <tr>
                            <td width="${memory/11}" bgcolor="#00FF00" align="center">
                                ${memory/11}
                            </td>
                            <td bgcolor="#FFFFFF">
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
	    </div>
	</div>
	<script>
	  $(function(){
	   
	  })
	  
	  function check_img_1(){
	      var echarts_dzscbgtj_bar = echarts.init(document.getElementById("check_img_1"));
	      var option = {
						 
						    tooltip : {
						        trigger: 'axis'
						    },
						    legend: {
						        data:['10.226.6.9','10.226.6.11']
						    },
						  
						    calculable : true,
						    xAxis : [
						        {
						            type : 'category',
						            boundaryGap : false,
						            data : ['','','','','','','']
						        }
						    ],
						    yAxis : [
						        {
						            type : 'value'
						        }
						    ],
						    series : [
						        {
						            name:'10.226.6.9',
						            type:'line',
						            smooth:true,
						            itemStyle: {normal: {areaStyle: {type: 'default'}}},
						            data:[10, 12, 21, 54, 26, 80, 71]
						        },
						       
						        {
						            name:'10.226.6.11',
						            type:'line',
						            smooth:true,
						            itemStyle: {normal: {areaStyle: {type: 'default'}}},
						            data:[20, 32, 61, 34, 20, 90, 20]
						        }
						    ]
						};
                     
	      echarts_dzscbgtj_bar.setOption(option);
	  }
	</script>
</#macro>
<#macro checkViews_2>
	  <div class="col-sm-6" style="background-color: #fff;">
		   <div class="ibox-title" style="border-color:#fff;padding-left: 100px;">
	            <h5>各检测方法通过率的占比</h5>
	        </div>
	    <div class="col-sm-12"  style="height: 200px;margin-top:30px;">
	       <div id="check_img_2" style="height: 250px;"></div>
	    </div>
	</div>
	<script>
	$(function(){
	   check_img_2();
	})
	function check_img_2(){
	 var echarts_dzscbgtj_bar = echarts.init(document.getElementById("check_img_2"));
			   var labelTop = {
		            normal : {
		                label : {
		                    show : true,
		                    position : 'center',
		                    textStyle: {
		                        baseline : 'bottom'
		                    }
		                },
		                labelLine : {
		                    show : false
		                }
		            }
		        };
		        var labelBottom = {
		            normal : {
		                color: '#ccc',
		                label : {
		                    show : true,
		                    position : 'center',
		                    formatter : function (a,b,c){return new Number(100.00 - c ).toFixed(2)+ '%'},
		                    textStyle: {
		                        baseline : 'top'
		                    }
		                },
		                labelLine : {
		                    show : false
		                }
		            },
		            emphasis: {
		                color: 'rgba(0,0,0,0)'
		            }
		        };
		        var radius = [40, 55]; 
		      var option = {
		              legend: {
		                    x : 'center',
			                y : 'top',
			                
			               data:[
					                    '稳定工况','双怠速','自由加速','加载减速'
					                ]
			            },
		            title : {
		                text: '',
		                subtext: '',
		                x: 'center'
		            },
		            toolbox: {
		                show : false,
		                feature : {
		                    dataView : {show: true, readOnly: false},
		                    restore : {show: true},
		                    saveAsImage : {show: true}
		                }
		            },
		            series : [
					                 {
			                    type : 'pie',
			                    center : ['20%', '30%'],
			                    radius : radius,
			                    data : [
			                        {name:'other', value:46, itemStyle : labelBottom},
			                        {name:'稳定工况', value:54,itemStyle : labelTop}
			                    ]
			                },
			               {
			                    type : 'pie',
			                    center : ['40%', '30%'],
			                    radius : radius,
			                    data : [
			                        {name:'other', value:46, itemStyle : labelBottom},
			                        {name:'双怠速', value:54,itemStyle : labelTop}
			                    ]
			                },
			                {
			                    type : 'pie',
			                    center : ['60%', '30%'],
			                    radius : radius,
			                    data : [
			                        {name:'other', value:56, itemStyle : labelBottom},
			                        {name:'自由加速', value:44,itemStyle : labelTop}
			                    ]
			                },
			                {
			                    type : 'pie',
			                    center : ['80%', '30%'],
			                    radius : radius,
			                    data : [
			                        {name:'other', value:65, itemStyle : labelBottom},
			                        {name:'加载减速', value:35,itemStyle : labelTop}
			                    ]
			                }
		            ]
		        };
	   echarts_dzscbgtj_bar.setOption(option);
	}
	</script>
</#macro>
<#macro checkViews_3>
	  <div class="col-sm-4" style="background-color: #fff;">
	     <div class="ibox-title" style="border-color:#fff;">
            <h5>检测站接入统计</h5>
        </div>
	     <div class="col-sm-12" id="check_img_3" style="height:200px;">
	        <img src="${WEB_PATH}/resources/img/jczsl_01.png" style="width:500px;margin-left: -18px;margin-top:50px;"/>
	     </div>
	</div>
</#macro>
<#macro checkViews_4>
	  <div class="col-sm-7" style="background-color: #fff;">
	  <div class="ibox-title" style="border-color: #fff;">
	            <h5>各地州检测站数量统计</h5>
	        </div>
	   <div class="col-sm-12" id="check_img_4" style="height: 650px;margin-top: -20px;">
	   </div>
	</div>
	<script>
	   $(function(){
	      check_img_4();
	   })
function initOptioncheck_img_4(legendDatas,yAxisData){
     var option = {
			    tooltip : {
			        trigger: 'axis'
			    },
			    toolbox: {
			        show : true,
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'value',
			            boundaryGap : [0, 0.01]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'category',
			            data : yAxisData
			        }
			    ],
			    series : [
			        {
			             name:'总数',
			            type:'bar',
			            data:legendDatas
			            
			        },
			    ]
			    
			};
			return option;
}
	   function check_img_4(){
	      var echarts_dzscbgtj_bar = echarts.init(document.getElementById("check_img_4"));
	     
	     echarts_dzscbgtj_bar.showLoading({
	            text: "图表数据正在努力加载..."
	  });
	  $.ajax({
		type: 'GET',
		url: '${WEB_PATH }/ports/report/getGjczsltj.do',  
		dataType: "json",
		success:function(result){
			if(result.success){
			    echarts_dzscbgtj_bar.hideLoading();
			
				var option = initOptioncheck_img_4(result.seriesData,result.yAxisData);
				
				echarts_dzscbgtj_bar.setOption(option); 
				
				
			}else{
				layer.msg('<font color="red">统计数据出现问题，请稍后再试！。</font>', {icon: 5}); 
			}
		},
		error:function(){
		    alert("加载失败");
		}
	   }); 
	   }
	</script>
</#macro>
<#macro checkViews_5>
	  <div class="col-sm-5" style="background-color: #fff;height:680px;">
		  <div class="ibox-title" style="border-color: #fff;">
	            <h5>各地州车辆检测总数</h5>
	        </div>
	    <table class="table" >
                <thead>
                    <tr>
			            <th>地州</th>
			            <th>检测车辆数</th>
			            <th>占比</th> 
                    </tr>
                </thead>
                <tbody id="gdzcljczs">
						  <tr>
						       <td>乌鲁木齐市</td>
						       <td>234562</td>
						       <td>20%</td> 
						  </tr>
						  <tr>
						       <td>克拉玛依市</td>
						       <td>12344</td>
						       <td>10%</td> 
						</tr>
						<tr>
						       <td>吐鲁番市</td>
						       <td>87654</td>
						       <td>7%</td> 
						</tr>
						<tr>
						       <td>哈密地区</td>
						       <td>24523</td>
						       <td>9%</td> 
						</tr>
						<tr>
						       <td>昌吉回族自治州</td>
						       <td>34567</td>
						       <td>10%</td> 
						  </tr>
						    <tr>
						       <td>博尔塔拉蒙古自治州</td>
						       <td>234534</td>
						       <td>4%</td> 
						</tr>
						<tr>
						       <td>巴音郭楞蒙古自治州</td>
						       <td>567898</td>
						       <td>9%</td> 
						</tr>
						<tr>
						       <td>阿克苏地区</td>
						       <td>12345</td>
						       <td>6%</td> 
						</tr>
						<tr>
						       <td>克孜勒苏柯尔克孜自治州</td>
						       <td>353222</td>
						       <td>6%</td> 
						  </tr>
						<tr>
						       <td>喀什地区</td>
						       <td>0</td>
						       <td>0%</td> 
						  </tr>
						
						<tr>
						       <td>和田地区</td>
						       <td>35535</td>
						       <td>4%</td> 
						  </tr>
						  <tr>
						       <td>伊犁哈萨克自治州</td>
						       <td>0</td>
						       <td>0</td> 
						  </tr>
						  <tr>
						       <td>塔城地区</td>
						       <td>12324</td>
						       <td>4%</td> 
						  </tr>
						  <tr>
						       <td>阿勒泰地区</td>
						       <td>56787</td>
						       <td>4%</td> 
						  </tr>
                </tbody>
            </table>
	</div>
<script>
$(function(){
    $.ajax({
		type: 'GET',
		url: '${WEB_PATH }/ports/report/getGdzcljzzs.do',  
		dataType: "json",
		success:function(result){
			if(result){
			     $("#gdzcljczs").empty();
			     var html = '';
			     for(var i=0;i<result.length;i++){
			         html +='<tr><td>'+result[i].dizhou+'</td><td>'+result[i].GNum+'</td><td>'+result[i].zhanbi+'</td></tr>';
			     }
			     $("#gdzcljczs").append(html);
			
			}else{
				layer.msg('<font color="red">统计数据出现问题，请稍后再试！。</font>', {icon: 5}); 
			}
		},
		error:function(){
		    alert("加载失败");
		}
   })
})

</script>	
	
</#macro>